 <style type="text/css">
/* 图片展示样式 */
.images_zone{position:relative; width:120px;height:120px; overflow:hidden; float:left; margin:3px 5px 3px 0; background:#f0f0f0;border:5px solid #f0f0f0; }
.images_zone span{display:table-cell;text-align: center;vertical-align: middle;overflow: hidden;width: 120px;height: 120px;}
.images_zone span img{width:120px; vertical-align: middle;}
.images_zone a{text-align:center; position:absolute;bottom:0px;left:0px;background:rgba(255,255,255,0.5); display:block;width:100%; height:20px;line-height:20px; display:none; font-size:12px;}
/* 进度条样式 */
.up_progress{width: 300px;height: 13px;font-size: 10px;line-height: 14px;overflow: hidden;background: #e6e6e6;margin: 5px 0;display:none;}
.up_progress .progress-bar{height: 13px;background: #11ae6f;float: left;color: #fff;text-align: center;width:0%;}
.fileinput_a{display:inline-block; width:120px; height:120px; background-image: url(assets/imgs/upload.jpg);  position:relative; overflow:hidden;}
.fileinput_a:hover{background-image: url(assets/imgs/upload.jpg); }
.fileinput_input{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}
</style>
<div class="main_fr_mic" style="margin-bottom:10px;">
          <i class="glyphicon glyphicon-home"></i>
          <a href="admin/index">首页</a><span>></span>
          <a  class="active">系统管理</a><span>></span>
          <a class="active">用户管理</a>
</div>
 
<div id="interfaceList" class="main_fr_down over">
	<div class="main_fr_search over mb10">
		  <form id="search_submit" class="form-inline">
			  <div class="good_top22">
				  <span class="good_top021">条件查询</span>
				  <!-- <span class="good_top022">
				      <input type="button" onclick="search(1);" class="search_an01 anbg" value="查询">
		              <input type="reset" class="search_an01" value="取消">
				   </span> -->
			  </div>
			  <div class="main_fr_search_cx">
				登录账号<input name="user.username" placeholder="请输入登录账号" type="text" class="srk" style="width:200px;"/>
				角色类型<select name="user.role_id" class="srk" style="width:200px;">
	              		<option value="">请选择分类</option>
	              		<option value="1">管理员</option>
						<option value="2">讲师</option>
						<option value="3">学员</option>
	              	</select>
	              	登录状态<select name="user.status" class="srk" style="width:200px;">
	              		<option value="">请选择状态</option>
	              		<option value="1">开启</option>
	              		<option value="0">禁用</option>
	              		<option value="0">未激活</option>
	              	</select>
	              	<input type="button" onclick="search(1);" class="search_an01 anbg" value="查询">	
			  </div>
		  </form>
	</div>
	<div class="sh_search over mb10">
		<div class="over sh_search_table">
			
	<div class="over mb10" style=" position:relative;">
		<div class="good_top22" style="margin-bottom: 0px;">
		  <span class="good_top021">用户列表</span>
		  <span class="good_top022">
		     <input type="button" onclick="update(0,0);" class="search_an01" value="新增">
		   </span>
		 </div>
	</div> 
	</div>
	<table class="table table-bordered table-hover">
		<thead  class="table_heaer">
			<tr class="text-center">
			<th>编号</th>
				<th>登录账号</th>
				<th>姓名</th>
				<th>角色类型</th>
				<th>权限</th>
				<th>登录状态</th>
				<th>操作</th> 
			</tr>
		</thead>
		<tbody id="projectTable">
		</tbody>
	</table>
	</div>
		<div id="pages" class="text-right"></div>	
	</div>
	
</div>

<!--  弹出层div-->
<div id="addFormDiv" class="hide" style="padding-top:15px;">
	<form class="form-horizontal" id="addForm">
		<input type="hidden" id="id" name="user.id">
		<div class="form-group">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">角色类型</label>
			<div class="col-sm-9">
			<select id="role_id" name="user.role_id" class="form-control" style="width:200px;">
					<option value="1">管理员</option>
					<option value="2">讲师</option>
					<option value="3">学员</option>
			</select>
			</div>
		</div>
		
		
		<div id="adminDiv">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">登录名称</label>
				<div class="col-sm-9">
					<input type="text"  class="form-control" id="username2" placeholder="请输入登录名称" name="user.username" minlength="2"  maxlength="20" required>
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">真实姓名</label>
				<div class="col-sm-9">
					<input type="text"  class="form-control" id="name" placeholder="请输入用户真实姓名" name="user.name" minlength="2"  maxlength="20" required>
				</div>
			</div>
			<div class="form-group" id="image_content">
			    <label for="exampleInputEmail2" class="col-sm-2 control-label">上传图片</label>
				<div class="col-sm-9">
				    <div style="float:left;">
				        <div class="files" id="image_path"></div>
			            <div style="clear:both;"></div><div class="up_progress"><div class="progress-bar"></div></div>
			            <div style="clear:both;"></div>
				    </div>
				    <div style="float:left;" class="fileinput_a" id="image_fileDiv">
				    	<input class="fileinput_input imageupload" type="file" value="浏览" name="image_files" data-url="upload/getFileUpload" multiple/>
	                </div>
	                <div style="float:left;" >
	              		 上传图片要求：格式（gif，jpe?g，png）最大为 2M
				    </div>
				    <br><br><br><br>
		         	<div id="tishi" class="hide"><font color="red">请上传图片！</font></div>
		         </div>
		    </div>
		    <div class="form-group">
				<label for="exampleInputEmail2" class="col-sm-2 control-label">个人简介</label>
				<div class="col-sm-9">
					<textarea rows="5" class="col-sm-12" id="des" placeholder="请输入个人简介" name="user.des"  minlength="2"  maxlength="200" required></textarea>
				</div>
			</div>
			<div class="form-group">
				<label for="exampleInputEmail2" class="col-sm-2 control-label">验证邮箱</label>
				<div class="col-sm-9">
					<input type="email" class="form-control" id="email" placeholder="请输入邮箱" name="user.email" required>
				</div>
			</div>
			<div class="form-group">
				<label for="exampleInputEmail2" class="col-sm-2 control-label">手机号</label>
				<div class="col-sm-9">
					<input type="phone" class="form-control" id="phone" placeholder="请输入手机号" name="user.phone" required>
				</div>
			</div>
			<div class="form-group">
				<label for="exampleInputEmail2" class="col-sm-2 control-label">登录状态</label>
				<div class="col-sm-9">
				<select id="status" name="user.status" class="form-control" style="width:200px;">
	              		<option value="1">开启</option>
	              		<option value="0">禁用</option>
	              	</select>
				</div>
			</div>
		</div>
	 
		<div class="form-group">
		<label for="exampleInputEmail2" class="col-sm-2 control-label"></label>
			<div class="col-sm-9">
			<button type="submit" class="btn btn-success">立即提交</button>
			<button type="reset" class="btn btn-default">重置</button>
			</div>
		</div>
		
	</form>
</div>

<div id="actList" class="row hide" style="margin-left: 0px; margin-right: 0px;">
	<div class="col-md-4">
		<input type="hidden" name="userid" id="userid">
		个人权限 <input type="checkbox" checked="checked" name="person" id="person" value="1"><br>
		角色权限 <input type="checkbox" checked="checked" name="role" id="role" value="1"><br>
		分组列表: <br>
		<table class="table table-bordered table-hover">
		<thead  class="table_heaer">
			<tr class="text-center">
			<th>分组名称</th>
			<th>操作</th> 
			</tr>
		</thead>
		<tbody id="groupList">
		</tbody>
	</table>
	</div>
	
	<div class="col-md-8">
		<div class="panel panel-primary">
			<div class="panel-body">
			<div id="privilegeTreeDiv">
				<div class="col-md-12">
				<input type="hidden" id="groupid">
					<div class="panel panel-info">
					  	<div class="panel-heading">权限树</div>
						<div id="menuTree" class="ztree panel-body">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	</div>
 
	
</div> 
<!-- 在这里引入本页面需要的js -->
 
<script>
function userList(data) {
	var dataStr = "";
	$.each(data, function(i, v) {
		dataStr += '<tr>';
		dataStr += '<td>' + v.id + '</td>';
		if(v.username == null || v.username == ""){
			dataStr += '<td></td>';
		}else{
			dataStr += '<td>' + v.username + '</td>';
		}
		dataStr += '<td>' + v.name + '</td>';
		if(v.role_id == 1){
			dataStr += '<td>管理员</td>';
		}else if(v.role_id == 2){
			dataStr += '<td>讲师</td>';
		}else if(v.role_id == 3){
			dataStr += '<td>学员</td>';
		}
		dataStr += '<td>';
		 @@if (ac(session.userId, 'rbac/addPersonMenu')){
				dataStr += '<a href="javaScript:menu(' + v.id + ');" class="btn btn-default">' + '权限' + '</a>';
		 @@}
		dataStr += '</td>';  
		 
		if(v.status==0){
			dataStr += '<td>禁用</td>';
		}else if(v.status==1) {
			dataStr += '<td>开启</td>';
		}else{
			dataStr += '<td>未激活</td>';
		}
		if(v.id==1){
			dataStr += '<td><a href="javaScript:update(' + v.id + ');" class="btn btn-default">' + '编辑' + '</a>';
			@@if (ac(session.userId, 'user/updatePassword')){
				dataStr += '<a href="javaScript:updatePassword(' + v.id + ');" class="btn btn-default">' + '重置密码' + '</a>';
			@@}
			dataStr += '</td>'; 
		}else{
			dataStr += '<td><a href="javaScript:update(' + v.id + ');" class="btn btn-default">' + '编辑' + '</a>';
			@@if (ac(session.userId, 'user/updatePassword')){
				dataStr += '<a href="javaScript:updatePassword(' + v.id + ');" class="btn btn-default">' + '重置密码' + '</a>';
			@@}
			@@if (ac(session.userId, 'user/del')){
				dataStr += '<a recordId="' + v.id + '" class="btn btn-default deleteButton">' + '删除' + '</a>';
			@@}
			dataStr += '</td>'; 
		}
		dataStr += '</tr>';
	});
	$("#projectTable").html(dataStr);
	$("#projectTable .deleteButton").click(function() {
		clickDelete($(this));
		return false;
	})
}
var cc=1;
function pageChange(curr) {
	$.get("user/list?curr="+curr, $("#search_submit").serialize(), function(data) {
		userList(data.content.list);
		laypage({
		    cont: $('#pages'), //容器。值支持id名、原生dom对象，jquery对象,
		    pages: data.content.totalPage, //总页数
		    skip: true, //是否开启跳页
		    skin: '#4599e0',
		    curr: data.content.pageNumber,
		    groups: 3, //连续显示分页数
		    jump: function(obj, first) {
		    	if(!first){ //一定要加此判断，否则初始时会无限刷新
		    		cc=obj.curr;
		    		pageChange(obj.curr);
		    	}
		    }
		});
	});
}
pageChange(1);
function search(curr){
	if(curr != 1){
		curr=cc;
	}
	pageChange(curr);
}
var index;
var validator;
$().ready(function() {
	// 手机号码验证
	jQuery.validator.addMethod("phone", function(value, element) {
	    var length = value.length;
	    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
	    return this.optional(element) || (length == 11 && mobile.test(value));
	}, "请正确填写您的手机号码");
	 
	 validator = $("#addForm").validate({
	        submitHandler:function(form){
	        	var url='user/update';
	        		var img = $("#img").val();
		        	if(img==null || img ==""){
		        		$("#tishi").removeClass("hide");
	        			return false;
		        	}else{
		        		$("#tishi").addClass("hide");
		        	}
	        	$.post(url, $("#addForm").serialize(), function(data){
	        		if(data.code==0){
	        			layer.msg("保存成功！");
	        			layer.close(index);
	        			search(cc);
	        		}else{
	        			layer.msg(data.content);
	        			return false;
	        		}
	        		
	        	}) 
	        }    
	    });
	    $("#reset").click(function() {
	        validator.resetForm();
	    });

	});
 
function update(id) {
	var tit = "新增用户信息";
	if(id != 0){
		var URL='user/getInfo';
    		$.post(URL,{id:id},function(data){
				if(data.code==0){
					for (var key in data.content){
						$("#"+key).val(data.content[key]);
						if(key=="username"){
							$("#username2").val(data.content['username']);
						}
					}
					
					var imgshow = '<div class="images_zone"><input type="hidden" id="img" name="user.img" value="'+data.content['img']+'" /><span><img src="'+data.content['img']+'"  /></span><a href="javascript:;">删除</a></div>';
		       	     $(".files").empty();
		       	     jQuery('#image_path').append(imgshow);	//将上传之后的图片放到image_path容器中
		       	     $("#image_fileDiv").addClass("hide");
			 		     
						if(data.content['img']==null){
							$("#image_path").empty();
							$("#image_fileDiv").removeClass("hide");
						}
				}else{
					layer.msg("获取信息失败！");
					return false;
				}
			})
		tit = "修改用户信息";
		$("#role_id").attr("disabled","disabled");
	}else{
		document.getElementById("addForm").reset();
		$("#id").val("");
		$("#image_path").empty();
		$("#image_fileDiv").removeClass("hide");
		$("#role_id").removeAttr("disabled");
	 	$("#adminDiv").removeClass("hide");
	} 
 	$("#addFormDiv").removeClass("hide");
	index=layer.open({
		type : 1,
		area: ['50%','80%'],
		title : tit,
		content : $("#addFormDiv"),
		cancel: function(index, layero) {
			 validator.resetForm();//// 重置表单验证提示
			$("#addFormDiv").addClass("hide");
			layer.close(index);
		} 
	})
};
function updatePassword(id){
	if(confirm("是否确定要重置密码？")){
		$.get("user/updatePassword", {"id":id}, function(data) {
			if (data.code == 0) {
				layer.msg("已将密码重置为6个1");
			}else{
				layer.msg("密码重置失败！");
				return false;
			} 
		})
	}
}
function clickDelete(obj) {
	// 给删除按钮注册事件
	// 获取当前记录的信息写入
	if(confirm("确定要删除该用户吗？")){
		var recordId = obj.attr("recordId");
		$.get("user/del", {"id":recordId}, function(data) {
			if (data.code == 0) {
				obj.closest("tr").remove();
				layer.msg("删除成功！");
			}else{
				layer.msg("删除失败！");
				return false;
			} 
		})
	}
}
/* -----------------------------权限树--------------------------------------------- */
function menu(id) {
		$("input[type=checkbox][class=group]").prop("checked",false); //先取消分组的选中状态
		$("#actList").removeClass("hide");
		$("#userid").val(id);
		//获取用户分组
		$.post("group/getUserGroup", {"userid":id}, function(data) {
			if (data.code == 0) {
				if(data.content != null){
				 $.each(data.content, function(i, v) {
					 $("input[type=checkbox][class=group][value="+v.group_id+"]").prop("checked",true);   
				 })
				}
			}else{
				layer.msg("获取数据失败！");
				return false;
			} 
			});
		$("#person").prop("checked",true);
		$("#role").prop("checked",true);
		getSelected();
		layer.open({
			type : 1,
			area: ['40%','70%'],
			title : '设置用户权限',
			content : $("#actList"),
			
			cancel: function(index, layero) {
				layer.close(index);
			}
		})
	};
</script>
 
<script>
//权限树 
var zTreeObj, zTreeObj2;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting22 = {
	data: {
		simpleData: {
			enable: true,
			pIdKey: "pid",
			rootPId: 0
		}
	},
	check: {
		enable: true,
		chkStyle: "checkbox",
		chkboxType: { "Y": "ps", "N": "s" }
	},
	view: {
		selectedMulti: false,
		showIcon: true,
		fontCss: {
		}
	},
	callback: {
		onClick: onClick,
		beforeCheck: beforeCheck,
		onCheck: onCheck
	}
};
var code, log, className = "dark";
function beforeCheck(treeId, treeNode) {
	className = (className === "dark" ? "":"dark");
	 if(confirm("确认要修改该权限吗？")){
		 return (treeNode.doCheck !== false);
	  }
	 return false; 
}
function onCheck(e, treeId, treeNode) {
	 var userid = $("#userid").val();
	 $.post("rbac/addPersonMenu", {personid:userid,menuid:treeNode.id}, function(data) {
		if(data.code==0){
			layer.msg("修改成功！");
		}else if(data.code==2){
			layer.msg(data.content);
		} else{
			layer.msg("修改失败！");
			return false; 
		}
	}) 
}		
function onClick(event, treeId, treeNode) {
	zTreeObj.expandNode(treeNode);
} 
$(document).ready(function(){
	 init();
	//获取分组列表
		$.get("group/getList", function(data){
			var dataStr = "";
			$.each(data.content, function(i, v) {
				dataStr += '<tr>';
				dataStr += '<td>' + v.name + '</td>';
				dataStr += '<td><input type="checkbox" class="group" name="group" value='+v.id+'></td>';
				dataStr += '</tr>';			 
			});
		   	$("#groupList").html(dataStr);
		   	$(".group").click(function(){
		   		//$('input[name="group"]').click(function(){	
		   		getSelected();
		   	});
		});
}); 
function init(){
	 //获取菜单列表
	$.get("role/getMenuList", function(data){
		var t1=[],parentMenu='';
		$.each(data.content, function(i, v) {
			if (v.pid == 0) {
				parentMenu += '<option value=' + v.id + '>' + v.name + '</option>';
			}
			t1.push(v);
		})
	   	zTreeObj = $.fn.zTree.init($("#menuTree"), setting22, t1);
	    zTreeObj.checkAllNodes(false); 
	   	zTreeObj.expandAll(true);
	   	setting22.check.chkboxType.Y="p";
	   	$("#parentMenu").append(parentMenu);
	});
};

$("#person").click(function(){
	getSelected();
});
$("#role").click(function(){
	getSelected();
});
 
function getSelected(){
	var userid = $("#userid").val();
	var zTree = $.fn.zTree.getZTreeObj("menuTree");
	zTree.checkAllNodes(false);//取消全部勾选
	
	if($("#person").is(":checked")){//选中  
		//alert("个人权限被选中");//打印选中的值 
		$.post("rbac/getPersonMenu", {"personid":userid}, function(data) {
			if (data.code == 0) {
				if(data.content != null){
				 $.each(data.content, function(i, v) {
					 var node = zTreeObj.getNodeByParam("id", v.menuid, null);//获取节点
					 zTreeObj.checkNode(node,true,false, false);//勾选节点
				 })
				}
			}else{
				layer.msg("获取数据失败！");
				//return false;
			} 
		})
	} 
	if($("#role").is(":checked")){//选中  
		//alert("角色权限被选中");//打印选中的值  
		$.post("role/getRoleMenu2", {"userid":userid}, function(data) {
			if (data.code == 0) {
				if(data.content != null){
				 $.each(data.content, function(i, v) {
					 var node = zTreeObj.getNodeByParam("id", v.menuid, null);//获取节点
					 zTreeObj.checkNode(node,true,false, false);//勾选节点
				 })
				}
			}else{
				layer.msg("获取数据失败！");
				//return false;
			} 
		})
	}
	//获取分组权限
	var id_array=new Array();  
	$('input[name="group"]:checked').each(function(){  
	    id_array.push($(this).val());//向数组中添加元素  
	});  
	var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串
	//为用户更新分组
	$.post("group/userAddGroup", {"groupid":idstr,userid:userid}, function(data) {
		if (data.code != 0) {
			layer.msg("获取数据失败！");
		} 
	})
	if(id_array != null && id_array != ""){
		$.post("group/getGroupMenu", {"groupid":idstr}, function(data) {
			if (data.code == 0) {
				if(data.content != null){
				 $.each(data.content, function(i, v) {
					 var node = zTreeObj.getNodeByParam("id", v.menuid, null);//获取节点
					 zTreeObj.checkNode(node,true,false, false);//勾选节点
				 })
				}
			}else{
				layer.msg("获取数据失败！");
				//return false;
			} 
		})
	}
}
</script>
<script>
/* 图片上传*********************************************************** */
$(".imageupload").fileupload({
	dataType: 'json',
	maxFileSize : 5000000000, // 5 G，文件大小,这里没有用，在acceptFileSize限制文件大小
    add: function (e, data) {//将要上传的文件名显示在一个元素节点上：你可以经常要将上传的文件显示到特定的元素上，这个可以通过add回调函数来实现：
    	var select = $("#type").val();//获取选择框数据
    	var uploadErrors = [];//创建一个包含错误类型的数组
 		var acceptFileTypes;//设置上传文件的类型
 		var acceptFileSize;
 		select = 2;
 		if (select==2) {
 			acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
 			acceptFileSize = 2*1024*1024;//5M
		}
 		if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
 		   uploadErrors.push('文件类型不正确！');
 		  }
 		if(data.originalFiles[0]['size'] > acceptFileSize) {
 		   uploadErrors.push('文件太大了！');
 		  }
 		if(uploadErrors.length > 0) {
 		   alert(uploadErrors.join("\n"));
 		   return false;
 		  }else {
 			 var numItems = $('.files .images_zone').length;//获取图片容器内的图片数量
 			 if (select==2) {
 		    	if(numItems>=10){
 		    		alert('提交照片不能超过10张');
 		    		return false;
 		    	}
 			}
 	 		//**************************自动上传**************************
 	 		$('.up_progress .progress-bar').css('width','0px');//给进度条添加样式
		    $('.up_progress').show();//显示进度条
		    $('.up_progress .progress-bar').html('Uploading...');//显示进度条文字
		    data.submit(); 
		    //**************************自动上传**************************
		   
		}
    },
    done: function (e, data) {//完成之后的回调函数
    	var d = data.result;//获取的数据必须转为data.result才可以使用！！！
    	var select = $("#type").val();
    	select = 2;
    	$('.up_progress').hide();
    	$('.upl').remove();
        //var d = data.result;
        if (select==2) {
        	 $(".files").empty();
           	 var imgshow = '<div class="images_zone"><input type="hidden" id="img" name="user.img" value="upload/image/'+d.content+'" /><span><img src="upload/image/'+d.content+'"  /></span><a href="javascript:;">删除</a></div>';
           	 jQuery('#image_path').append(imgshow);	//将上传之后的图片放到image_path容器中
        	 $("#image_fileDiv").addClass("hide");
 	 		 $("#image_reset").removeClass("hide");
        }
    },
    progressall: function (e, data) {//所有文件的总体上传进度(progressall)显示
    	console.log(data);
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.up_progress .progress-bar').css('width',progress + '%');
    }
});
//图片删除
$('.files').on({
	mouseenter:function(){
		$(this).find('a').show();
	},
	mouseleave:function(){
		$(this).find('a').hide();
	},
},'.images_zone');
$('.files').on('click','.images_zone a',function(){
	$(this).parent().remove();
	$("#image_fileDiv").removeClass("hide");
});
</script>